<template>
  <el-header>
    <div class="logo">母婴商城</div>
    <el-menu :default-active="activeMenu" class="navbar" mode="horizontal">
      <el-menu-item index="/" @click="navigateTo('/')">首页</el-menu-item>
      <el-menu-item index="/products" @click="navigateTo('/products')">商品展示</el-menu-item>
      <el-menu-item index="/cart" @click="navigateTo('/cart')">购物车</el-menu-item>
      <el-menu-item index="/recommendations" @click="navigateTo('/recommendations')">母婴特色推荐</el-menu-item>
      <el-menu-item index="/profile" @click="navigateTo('/profile')">个人中心</el-menu-item>
    </el-menu>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: this.$route.path,
    };
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.logo {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}
.navbar {
  background-color: #f5f5f5;
}
</style> 